/*弹性盒子*/
/*float clear vertical-align失效*/
#a1{
    display: flex;

    /*主轴方向:
    row默认从左到右 row-reverse从右到左 column从上到下 column-reverse从下到上*/
    flex-direction: row;

    /*主轴上子元素排列方式:
    flex-start默认从头开始 flex-end从尾部开始 center从主轴居中开始
    space-around平分剩余空间 space-between两边贴边再平分空间*/
    justify-content: space-between;

    /*子元素是否换行:
    wrap换行 nowrap不换行
    */
    flex-wrap: wrap;

    /*侧轴上子元素排列方式（多行时使用 :
    stretch (默认) 拉伸(子项目需无高度
    flex-start从头开始 flex-end从尾部开始 center从侧轴居中开始
    space-around平分剩余空间 space-between两边贴边 再平分空间
    */
    align-content: center;

    /*侧轴上子元素排列方式（单行时使用 :
    stretch (默认) 拉伸(子项目需无高度
    flex-start从头开始 flex-end从尾部开始 center从侧轴居中开始
    */
    align-items: center;

    /*复合属性*/
    /*flex-flow: row wrap;*/
}

#a2{
    /*子项占的份数:
    为1时占满剩余空间
    */
    flex: 1;

    /*子项自己在侧轴排列方式:

    */
    align-self: flex-start;

    /*子项排列顺序:
    */
    order: 1;
}